<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="750"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Utility function for drawing text
    function drawText(text, x, y, font = '24px Times New Roman', align = 'center', baseline = 'middle') {
        ctx.font = font;
        ctx.textAlign = align;
        ctx.textBaseline = baseline;
        ctx.fillStyle = 'black';
        ctx.fillText(text, x, y);
    }

    // Function to draw stippling pattern
    function drawStippling(x, y, w, h) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip();
        const numDots = (w * h) / 5; // Adjust density
        for (let i = 0; i < numDots; i++) {
            const dotX = x + Math.random() * w;
            const dotY = y + Math.random() * h;
            ctx.beginPath();
            ctx.arc(dotX, dotY, 0.8, 0, 2 * Math.PI);
            ctx.fill();
        }
        ctx.restore();
    }

    // Function to draw hatching pattern (diagonal lines)
    function drawHatching(x, y, w, h) {
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip();
        const spacing = 8;
        for (let i = -h; i < w; i += spacing) {
            ctx.moveTo(x + i, y);
            ctx.lineTo(x + i + h, y + h);
        }
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Main Drawing ---
    
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';

    // 1. Outer Frame
    ctx.strokeRect(40, 20, 520, 710);

    // 2. Suspension System
    const centerX = 300;
    const a = 90;
    const plateY = 170;
    const suspensionTopY = 40;
    
    // Suspension lines
    ctx.beginPath();
    ctx.moveTo(centerX - a, suspensionTopY);
    ctx.lineTo(centerX - a, plateY);
    ctx.moveTo(centerX + a, suspensionTopY);
    ctx.lineTo(centerX + a, plateY);
    ctx.stroke();

    // 3. Main Glass Plate (Top Rectangle)
    const c = 60;
    const plateWidth = 2 * a;
    const plateHeight = c;
    const plateX = centerX - a;
    
    ctx.strokeRect(plateX, plateY, plateWidth, plateHeight);
    
    // 4. Stippled Area
    drawStippling(plateX, plateY, a, plateHeight);

    // 5. Central Dashed Line
    ctx.save();
    ctx.setLineDash([5, 4]);
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(centerX, 120);
    ctx.lineTo(centerX, 350);
    ctx.stroke();
    ctx.restore();

    // 6. Labels for the main plate
    drawText('2a', centerX - a - 40, 130, 'italic 24px Times New Roman');
    drawText('2a', centerX + a + 40, 130, 'italic 24px Times New Roman');
    drawText('a', centerX - a / 2, plateY - 15, 'italic 24px Times New Roman');
    drawText('a', centerX + a / 2, plateY - 15, 'italic 24px Times New Roman');
    drawText('b', centerX - a / 2, plateY + plateHeight + 15, 'italic 24px Times New Roman');
    drawText('b', centerX + a / 2, plateY + plateHeight + 15, 'italic 24px Times New Roman');
    drawText('c', plateX - 15, plateY + plateHeight / 2, 'italic 24px Times New Roman');
    drawText('c', plateX + plateWidth + 15, plateY + plateHeight / 2, 'italic 24px Times New Roman');

    // 7. Lower Diagram (Schematic View)
    const lowerY = 420;
    const lowerPlateHeight = 25;
    
    // Lower bar
    ctx.strokeRect(centerX - 110, lowerY, 220, lowerPlateHeight);
    // Upper bar (shifted)
    ctx.strokeRect(centerX - 90, lowerY - 10, 180, lowerPlateHeight);

    // Hatching on lower diagram
    drawHatching(centerX - 90, lowerY, 90, lowerPlateHeight);
    drawHatching(centerX, lowerY - 10, 90, lowerPlateHeight);
    
    // Brackets/Arcs
    ctx.save();
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(centerX - 150, lowerY + lowerPlateHeight / 2 - 5, 50, Math.PI * 1.4, Math.PI * 0.6, true);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(centerX + 150, lowerY + lowerPlateHeight / 2 - 5, 50, Math.PI * -0.4, Math.PI * 0.4, false);
    ctx.stroke();
    ctx.restore();

    // 8. Bottom Text Labels
    drawText('玻璃板俯视图', centerX, 520, '28px STKaiti');
    
    // Draw "Cl₂气, p" with subscript
    const gasTextY = 600;
    const gasTextX = centerX - 50;
    drawText('Cl', gasTextX, gasTextY, 'italic 28px Times New Roman', 'left');
    drawText('2', gasTextX + 28, gasTextY + 8, 'italic 20px Times New Roman', 'left');
    drawText('气, p', gasTextX + 40, gasTextY, '28px STKaiti', 'left');

</script>
</body>
</html>